<template>
  <m-list-construction title="运营配置">
    <template slot="content">
      <div class="bg-box">
        <!-- 标准计费折扣比例 -->
        <div class="top">
          <h4>标准计费规则</h4>
          <el-form
            ref="formData"
            :model="formData"
          >
            <el-row>
              <el-col
                :span="12"
                class="boderLine"
              >标准计费折扣比例</el-col>
              <el-col
                :span="12"
                class="boderLine"
              >
                <el-form-item :prop="rebateRatio">
                  <el-input-number
                    v-model="formData.rebateRatio"
                    size="mini"
                    :min="0"
                    :max="100"
                    ref="baseNumber"
                    :controls="false"
                    class="w-full"
                    v-if="formShow"
                    :precision="0"
                  ></el-input-number>
                  <span v-else>{{formData.rebateRatio}}</span>
                  <span style="margin-left:5px">%</span>
                  <span
                    class="editor"
                    @click="editBase"
                  >修改</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="btn">
            <div>
              <el-button
                size=mini
                style="color:#33317E;width: 80px;"
                @click="baseCancel"
              >取消</el-button>
              <el-button
                size=mini
                type="primary"
                style="width: 80px;"
                @click="baseSave"
              >保存</el-button>
            </div>
          </div>
        </div>
        <!-- 梯度表格 -->
        <div class="bottom">
          <h4>梯度计费规则</h4>
          <el-form
            ref="form"
            :model="form"
            :show-message="false"
          >
            <el-table
              :data="form.tableData"
              border
              stripe
              :key="TableIndex"
            >
              <el-table-column
                prop="ruleName"
                label="金额范围"
                width="260"
                align="center"
              >
                <el-table-column
                  prop="ruleName"
                  label="梯度计费"
                  align="center"
                  width="260"
                ></el-table-column>
              </el-table-column>
              <el-table-column
                prop="minNumber"
                label="最小值 ≥（元）"
                align="center"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'tableData.' + scope.$index + '.minNumber'"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' } ]"
                  >
                    <el-input-number
                      v-model="scope.row.minNumber"
                      size="mini"
                      :ref="'flag1'+scope.$index"
                      :min="0"
                      :max="999999"
                      :controls="false"
                      class="w-full"
                      :precision="2"
                      v-if="scope.row.flag1"
                      @blur="inputBlur(scope.row,scope.$index,'flag1')"
                    ></el-input-number>
                    <span
                      v-else
                      class="text"
                    >{{scope.row.minNumber}}</span>
                    <!-- <span style="margin-left:5px">%</span> -->
                    <span
                      class="editor"
                      @click="editClick(scope.$index,'flag1')"
                    >修改</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="maxNumber"
                label="最大值 <（元）"
                align="center"
              >
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.maxNumber!==-1"
                    :prop="'tableData.' + scope.$index + '.maxNumber'"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' } ]"
                  >
                    <el-input-number
                      v-model="scope.row.maxNumber"
                      size="mini"
                      :ref="'flag2'+scope.$index"
                      :min="0"
                      :max="999999.99"
                      :controls="false"
                      class="w-full"
                      :precision="2"
                      v-if="scope.row.flag2"
                      @blur="inputBlur(scope.row,scope.$index,'flag2')"
                    ></el-input-number>
                    <span
                      v-else
                      class="text"
                    >{{scope.row.maxNumber}}</span>
                    <!-- <span style="margin-left:5px">%</span> -->
                    <span
                      class="editor"
                      @click="editClick(scope.$index,'flag2')"
                    >修改</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="rebateRatio"
                label="折扣比例（%）"
                align="center"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'tableData.' + scope.$index + '.rebateRatio'"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' } ]"
                  >
                    <el-input-number
                      v-model="scope.row.rebateRatio"
                      size="mini"
                      :ref="'flag3'+scope.$index"
                      :min="0"
                      :max="100"
                      :controls="false"
                      class="w-full"
                      :precision="0"
                      v-if="scope.row.flag3"
                      @blur="inputBlur(scope.row,scope.$index,'flag3')"
                    ></el-input-number>
                    <span
                      class="text"
                      v-else
                    >{{scope.row.rebateRatio}}</span>
                    <span style="margin-left:5px">%</span>
                    <span
                      class="editor"
                      @click="editClick(scope.$index,'flag3')"
                    >修改</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div class="btn">
            <div>
              <el-button
                size=mini
                style="color:#33317E;width: 80px;"
                @click="gradsCancel"
              >取消</el-button>
              <el-button
                size=mini
                type="primary"
                style="width: 80px;"
                @click="gradsSave"
              >保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </m-list-construction>
</template>

<script>
  import { getChargingRuleList, putChargingRule } from '@/conf/home/apis'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  export default {
    name: 'operationConfiguration',
    components: { mListConstruction },
    data () {
      return {
        TableIndex: 0,
        formShow: false,
        form: {
          tableData: [
            {
              ruleName: '梯度1',
              minNumber: 0,
              maxNumber: 1000,
              rebateRatio: 100
            },
            {
              ruleName: '梯度2',
              minNumber: 0,
              maxNumber: 0,
              rebateRatio: 0
            },
            {
              ruleName: '梯度3',
              minNumber: 0,
              maxNumber: -1,
              rebateRatio: 0
            }
          ]
        },
        formData: {
          rebateRatio: 0
        }
      }
    },
    methods: {
      editBase () {
        this.formShow = true
        this.$nextTick(() => {
          this.$refs.baseNumber.focus()
        })
      },
      // 修改按钮点击
      editClick (index, status) {
        this.TableIndex++
        this.$set(this.form.tableData[index], status, true)
        this.$nextTick(() => {
          this.$refs[status + index].focus()
        })
      },
      // 修改失焦事件
      inputBlur (row, index, status) {
        // this.TableIndex++
        // this.$set(this.form.tableData[index], status, false)
      },
      /* getList */
      async getChargingRuleList () {
        try {
          const res = await getChargingRuleList()
          if (res && res.success) {
            console.log(res)
            const { data } = res
            this.formData = data.splice(0, 1)[0]
            this.form.tableData = data.map((item, index) => {
              return {
                id: item.id,
                ruleName: item.ruleName,
                minNumber: item.minNumber,
                maxNumber: item.maxNumber,
                rebateRatio: item.rebateRatio
              }
            }).map((item, index) => {
              return Object.assign(item, { flag1: false, flag2: false, flag3: false, index: index })
            })
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          console.log('error===>', error)
        }
      },
      /* 标准计费 */
      async baseCancel () {
        this.getChargingRuleList()
      },
      async baseSave () {
        const data = [
          {
            id: this.formData.id,
            rebateRatio: this.formData.rebateRatio
          }
        ]
        try {
          const res = await putChargingRule(data)
          if (res && res.success) {
            this.$message.success('操作成功')
            this.getChargingRuleList()
            this.formShow = false
          } else {
            this.$message.warning(res.msg)
            this.getChargingRuleList()
          }
        } catch (error) {
          console.log('error===>', error)
        }
      },
      /* 梯度计费 */
      async gradsSave () {
        const data = this.form.tableData.map((item, index) => {
          return {
            id: item.id,
            ruleName: item.ruleName,
            minNumber: item.minNumber,
            maxNumber: item.maxNumber,
            rebateRatio: item.rebateRatio
          }
        })
        try {
          const res = await putChargingRule(data)
          if (res && res.success) {
            this.$message.success('操作成功')
            this.getChargingRuleList()
          } else {
            this.$message.warning(res.msg)
            this.getChargingRuleList()
          }
        } catch (error) {
          console.log('error===>', error)
        }
      },
      gradsCancel () {
        this.getChargingRuleList()
      }
    },
    created () {
      this.getChargingRuleList()
    }
  }
</script>
<style scoped lang='scss'>
.bg-box {
  background-color: #fff;
  margin-top: 20px;
  min-height: calc(100vh - 170px);
  border-radius: 8px;
  padding: 20px;
  .boderLine {
    border: 1px solid #cccccc;
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    border-bottom: 1px solid #eeeeee;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0px;
  }
  .btn.active,
  .btn:active {
    box-shadow: none;
  }
  .editor {
    color: #33317e;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    width: 60px;
  }
}
.w-full {
}
.text {
  display: block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
</style>
<style scoped lang='scss'>
h4 {
  width: 96px;
  height: 20px;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-600;
  font-weight: 600;
  text-align: LEFT;
  color: #333333;
  line-height: 20px;
}
::v-deep .el-form-item {
  margin: 0 !important;
  display: flex;
  justify-content: center;
}
::v-deep .el-form-item__content {
  height: 30px;
  width: 140px;
  display: flex;
  align-items: center;
  margin-left: 50px;
}
::v-deep .el-input {
  height: 30px;
  width: 80px;
  display: flex;
  align-items: center;
  border-radius: 0;
  .el-input__suffix {
    top: -5px;
  }
}
::v-deep .el-input__inner {
  height: 30px;
  width: 80px;
  padding: 0 15px 0 10px;
  border-radius: 0;
}

::v-deep .el-table thead.is-group th {
  background: none;
  padding: 0px;
}
::v-deep .el-table tbody .el-table__row td {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none; /*中间的横线去掉*/
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
  text-align: right; /*上边文字靠右*/
  padding-right: 20px;
  padding-top: 10px;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left; /*下边文字靠左*/
  padding-left: 20px;
  padding-bottom: 10px;
}
/*斜线代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 150px; /*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-75deg); /*调整斜线的角度*/
  -webkit-transform-origin: top;
  transform-origin: top;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 150px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-76deg); /*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
</style>
